<script>
  import {setContext} from 'svelte'
  import {onMount} from 'svelte';
  import {Post} from '../lib/net.js';
  import {FontHost, VeriState} from '../conf.js';
  import {VeriList, VeriSuccess, VeriFailed} from '../api.js';
  import Query from '../model/query.js';
  import QueryBar from '../components/queryBar.svelte';
  import {IsAdmin} from '../lib/token.js';
  import moment from 'moment';
  import List from '../components/list.svelte';
  import Btn from '../components/btn.svelte';
  import Paging from '../components/paging.svelte';

  let btnText = `<i>+</i>添加代理`
  let btnHref = "/agent/add"


  // let total = 0;
  // let agents = 0;
  // let users = 0;

  // 0 待审核；1 审核通过；2 拒绝

  let query = new Query();

  // 向列表赛数据，须先定义表头，拿到数据后做title下表映射关系.

  let data = {title: ["UID", "姓名", "手机号", "邮箱", "身份证号码", "正面照片", "背面照片", "手持照片", "申请时间", "操作"], data: []}

  onMount(() => {
    prepareList();
  });

  async function getList() {
    let ret = await Post(VeriList, query)

    console.log('retpagetotal')
    console.log(ret)
    query.total = "";
    query.size = ""
    query.page = ""
    // $: numOfFriends = people.friends.length;
    $: query.total = ret.total;
    $: query.size = ret.size;
    $: query.page = ret.page;
    let _data = [];
    for (let item of ret.list) {
      let arr = [item.user_id, item.name, item.phone,item.email, item.id,
				`<a href="${FontHost}/${item.a}">正面</a>`,
				`<a href="${FontHost}/${item.b}">背面</a>`,
				`<a href="${FontHost}/${item.portrait}">手持</a>`,
				item.show_create_date]
      if (query.state == 1) {
        arr.push(item.show_update_date)
        data.title = ["UID", "姓名", "手机号","邮箱",  "身份证号码", "正面照片", "背面照片", "手持照片", "申请时间", "审核时间", "状态"]
      }

      //,item.state == 2 ? item.stateMsg : VeriState[item.state]
      if (item.state == 2) arr.push(item.stateMsg);
      if (item.state == 0) {
        arr.push(VeriState[0]);
        arr.push(VeriState[1]);
      }
      if (item.state == 1) {
        arr.push(VeriState[2]);
      }
      arr.id = item.info_id;
      arr.handler = deal;
      _data.push(arr);
    }
    data.data = _data;
    console.log('query')
    console.log(query)
    // setContext('someKey', query)
  }

  async function deal() {
    let id = this.getAttribute("data-id");
    let btn = this.querySelector("button");
    let type = btn.getAttribute("data-type");

    if (type == "access") {
      await Post(VeriSuccess, {id: Number(id), state: 1});
      getList();
    }
    if (type == "refuse") {
      // TODO: 拒绝理由改成手动填写
      await Post(VeriFailed, {id: Number(id), state: 2, condition: "照片模糊"});
      getList();
    }
  }

  function setPage(page) {
    query.page = page;
    getList();
  }

  async function prepareList() {
    query.state = 0;
    setPage();
  }

  async function doneList() {
    query.state = 1;
    setPage();
  }

  async function refuseList() {
    query.state = 2;
    await setPage();
  }
</script>

<div class="view">
		<div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px"
				 class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            实名认证-待审核
        </span>
		</div>
		<!--<div class="borderRadius4 container  backBlue colorWhite ">-->
				<!--<div class="columns" style="padding: 20px;">-->
						<!--<div class="column is-2">-->
								<!--<nav class="level">-->
										<!--<div class="level-item has-text-centered">-->
												<!--<div>-->
														<!--<p class="heading">实名总数</p>-->
														<!--<p class="font25 colorWhite">{query.total}人</p>-->
												<!--</div>-->
										<!--</div>-->
								<!--</nav>-->
						<!--</div>-->
				<!--</div>-->
		<!--</div>-->
		<!--<div class="borderRadius4 container rowCenter " style="margin-top: 0px">-->
				<!--<QueryBar query={query} on:message={getList}/>-->
		<!--</div>-->
		<div class="container" style="margin-top: 0px">
				<List data={data}/>
		</div>

		<div class="container rowReverse">
				{#if query.total !== 0}
				<Paging page={query} handler={setPage}/>
						{/if}
		</div>
</div>

<style>
		.borderRadius4{
				border-radius: 4px;
		}
		.container {
				margin:20px 5px;
		}

		.info {
				background: #fff;
		}

		.btn {
				line-height: 5px;
				top: 50%;
				transform: translateY(10%);
		}
</style>
